'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { Link,browserHistory } from 'react-router';
import * as actions from '../../actions/mjs1';
import { Button,Search,Notice,Icon,Dialog,Loading,DatePicker,Breadcrumb,Form,Field,Input,Checkbox,Tag,Range} from 'qnui';
import { Row, Col } from 'qnui/lib/grid';
import Step, { Item as StepItem } from 'qnui/lib/step';
import Radio,{ Group as RadioGroup } from 'qnui/lib/radio';
import { RangePicker } from 'qnui/lib/date-picker';
import GoodsItems from 'components/goods-items/index';
import SystemDialog from 'components/system-dialog/index';
import './index.scss';

const FormItem = Form.Item;
class Mjs1SetGift extends React.Component {
    constructor(props) {
        super(props);
		this.field = new Field(this, {
				scrollToFirstError:true,
				onChange: (name, value) => {
					if(name!="tagName"){
						this.setState({overlayVisible:false});
					}
					if(this.field.getState(name)=="success"){
						this.props.dispatch(actions.setField(name,value));
					}
				}
			});
		this.dispatch = this.props.dispatch;
        this.state = {
			overlayVisible:false,
            value: null,
			search:"",
			hasTag:false,
			refreshDialog:false,
			refreshContent:"",
			itemDialog:false,
			gifts:[],
			giftTitleDialog:false
        };
		sessionStorage.removeItem("activityId");
		sessionStorage.removeItem("setItems");
    }
	componentWillReceiveProps(nextProps) {
		if(nextProps.mjs1.actionDone){
			this.props.dispatch(actions.setField("actionDone",false));
			Dialog.alert({content:"已成功地把商品加入满就送折扣！"});
		}
    }
	componentDidMount(){
		
	}
	onVisibleChange = (visible) => {
        this.setState({
            overlayVisible:visible,
        });
    }

	onCloseSystemDialog(){
		this.setState({"refreshDialog":false,"orderDialog":false});
		this.props.dispatch(actions.closeDialog());
	}
	handleShowItems(){
		this.setState({"itemDialog":true});
		
	}
	itemDialogClose(){
		this.setState({"itemDialog":false});
	}
	getSelectItems(items){
		this.props.dispatch(actions.setField("joinItems",items));
	}
	removeGift(item){
		const joinItems = this.props.mjs1.joinItems;
		const j = joinItems.indexOf(item);
		joinItems.splice(j,1);
		this.props.dispatch(actions.setField("joinItems",joinItems));
	}
	handleOnAddItems(){
		if(parseInt(window.info.timestemp)+1800 < Date.parse(new Date())/1000){
			// 操作授权超过半小时，请重新授权
			this.setState({"refreshDialog":true});
			return false;
		}
		this.props.dispatch(actions.addItemsToActive(this.props.mjs1.joinItems,this.props.mjs1.activityId));
	}
  render() {
	const init = this.field.init;
	const formItemLayout = {
		labelCol: {span: 10},
		wrapperCol: {span: 14},
	};
	const date = new Date();
	const defaultNotice = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日设置的折扣";
	const step2 = this.props.mjs1.participate_range=="0"?"":<StepItem title="选择商品" />;
	const gift_display = (this.props.mjs1.is_send_gift=="false" || !this.props.mjs1.is_send_gift)?"none":"block";
	const joinItems = this.props.mjs1.joinItems?this.props.mjs1.joinItems:[];
	const shop_member_display = (this.props.mjs1.is_shop_member=="false"||!this.props.mjs1.is_shop_member)?"none":"block";
	return (
        <div className="page1-page">
        		<SystemDialog 
					 loginError={this.props.mjs1.loginError}
				    creating={this.props.mjs1.creating}
				    message={this.props.mjs1.message}
				    error={this.props.mjs1.error}
					 refreshDialog={this.state.refreshDialog}
					 orderDialog={this.state.orderDialog}
	      		 onCloseDialog={this.onCloseSystemDialog.bind(this)}
					/>
            <Dialog
						visible = {this.state.itemDialog}
		            onOk = {this.itemDialogClose.bind(this)}
		            onCancel = {this.itemDialogClose.bind(this)}
		            onClose = {this.itemDialogClose.bind(this)} 
						title = "选择商品"
						>
						<Row style={{width:"880px"}}>
						    <h3>
							    <GoodsItems nick={window.info.user_nick} showDepot={false} maxSelect={50} selectedItems={this.props.mjs1.joinItems} getSelectItems={this.getSelectItems.bind(this)}/>
						    </h3>
						</Row>
			    </Dialog>
			    
          <Row style={{background:"#F6F6F6",margin:"3px 0"}} justify="start">
			<Col span="8" align="center">
			<Breadcrumb maxNode={5}>
				  <Breadcrumb.Item>打折活动</Breadcrumb.Item>
				  <Breadcrumb.Item>创建</Breadcrumb.Item>
				  <Breadcrumb.Item>满就送折扣</Breadcrumb.Item>
			  </Breadcrumb>
			</Col>
			<Col offset="3">
					<Step current={3} type="dot">
						<StepItem title="创建活动" />
						<StepItem title="设置折扣和包邮" />
						<StepItem title="设置礼品和会员范围" />
						{step2}
						<StepItem title="完成"/>
					</Step>
			</Col>
		  </Row>
          <Row type="wrap" justify="start" style={{marginTop:"50px"}}>
          		{
          		joinItems.map(item=>{
          			return <div className="item" onClick={this.removeGift.bind(this,item)}>
				    				<Icon type="close" size="small" className="close" />
				    				<div className="item-pic"><img src={item.pic_url+"_100x100"} /></div>
				    				<div className="item-title">{item.title}</div>
				    			</div>
          			})
          
          		}
				<Tag  shape="link"  style={{width:"100px",height:"100px"}} ><Icon style={{width:"80px",lineHeight:"100px"}} type="add" size="small"  onClick={this.handleShowItems.bind(this)} /></Tag>
          </Row>
          <Row type="wrap">
          		<Col  style={{textAlign:"center"}}>
          			<Button  size="large" type="primary" style={{fontSize:"16px"}} onClick={this.handleOnAddItems.bind(this)}>添加已选择商品</Button>&nbsp;
          				<Link to="mjs1_list">
	          				<Button size="large" type="normal">查看折扣列表</Button>
	          			</Link>
      			</Col>
          </Row>
        </div>
    );
  }
}


export default connect((state)=> {
  return {
    mjs1: state.mjs1
  };
})(Mjs1SetGift);
